<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 450px;

            margin: 30px auto;
        }

        h3 {
            text-align: center;
        }

        .s1 {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #cccccc;
            text-align: center;
            line-height: 30px;
        }

        .nav {
            text-align: center;
        }

        .bottom {
            width: 500px;
            height: 300px;
            box-shadow: 0 0 10px #cccccc;
            margin: 20px auto;
            border-radius: 5px;
        }

        h4 {
            text-align: center;
            padding-top: 10px;
        }

        .aa {
            text-align: center;
        }

        .yan {
            background-color: #008000;

        }

        .text {
            color: white;
        }

        .txt {
            color: #008000
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h3>用户注册</h3>
            <div class="nav">
                <span :class="page>=1? 'text s1 yan':'' ">1</span> <span :class="page>=1?'txt':''">账号密码</span> <span
                    :class="page>=1?'txt':''">———</span>
                <span :class="page>=2?'s1 text yan':''">2</span> <span :class="page>=2?'txt':''">手机绑定</span> <span
                    :class="page>=2?'txt':''">———</span>
                <span :class="page>=3?'s1 text yan':''">3</span> <span :class="page>=3?'txt':''">邮箱绑定</span> <span
                    :class="page>=3?'txt':''">———</span>
                <span :class="page>=4?'s1 text yan':''">4</span> <span :class="page>=4?'txt':''">注册完成</span>
            </div>
            <div class="bottom">
                <div class="aa" v-if="page==1">
                    <h4>账号密码</h4>
                    账号：<input type="text"><br>
                    密码：<input type="password"><br>
                    <input type="button" value="下一步" @click="page++">
                </div>
                <div class="aa" v-if="page==2">
                    <h4>手机绑定</h4>
                    手机：<input type="text">
                    <br>
                    <input type="button" value="上一步" @click="page--">
                    <input type="button" value="下一步" @click="page++">
                </div>
                <div class="aa" v-if="page==3">
                    <h4>邮箱绑定绑定</h4>

                    <input type="button" value="上一步" @click="page--">
                    <input type="button" value="下一步" @click="page++">
                </div>
                <div class="aa" v-if="page==4">
                    <h4>注册完成</h4>

                    <input type="button" value="上一步" @click="page--">
                    <input type="button" value="注册用户">
                </div>
            </div>
        </div>

    </div>
    <script type="module">
        import { createApp } from "./assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    page: 1
                }
            },

        }).mount("#app");
    </script>
</body>

</html>